<template>
  <view class="notification-list" v-if="notifications.length > 0">
    <view
      class="notification-item simple-item"
      v-for="item in notifications"
      :key="item.oId"
      @click="handleNotificationClick(item)"
      :class="{ unread: !item.hasRead }"
    >
      <view class="notification-body">
        <text class="notification-text">{{ formatContent(item) }}</text>
        <text class="notification-time">{{ formatTime(item.createTime) }}</text>
      </view>
    </view>
  </view>

  <!-- 空状态提示 -->
  <view class="empty-state" v-else-if="!loading">
    <FeatherIcon name="inbox" size="55" color="#999" />
    <text class="empty-text">暂无积分通知</text>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import FeatherIcon from "@/components/FeatherIcon.vue";
import { timeAgo } from "@/utils/common.js";

const props = defineProps({
  notifications: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["notification-click"]);

// 处理通知点击
const handleNotificationClick = (notification) => {
  // 标记为已读的ID
  const readId = notification.oId;

  // 准备跳转信息，标准化跳转目标
  let routeInfo = {
    readId: readId, // 用于标记已读的ID
    type: "article", // 默认跳转类型：文章、webview等
    params: {}, // 跳转参数
  };

  // 从通知内容中提取文章ID
  try {
    const content = notification.description || "";
    const articleMatch = content.match(
      /href="https:\/\/fishpi\.cn\/article\/(\d+)"/
    );

    if (articleMatch && articleMatch[1]) {
      // 如果成功解析到文章ID，跳转到文章详情
      routeInfo.type = "article";
      routeInfo.params = {
        id: articleMatch[1],
      };
    } else {
      // 如果无法解析ID，则使用未知类型
      routeInfo.type = "unknown";
      routeInfo.original = notification; // 保留原始数据
    }
  } catch (error) {
    console.error("解析通知内容错误", error);
    routeInfo.type = "unknown";
    routeInfo.original = notification; // 保留原始数据
  }

  // 发送标准格式的通知点击事件
  emit("notification-click", routeInfo);
};

// 格式化通知内容
const formatContent = (item) => {
  if (!item) return "";

  try {
    let content = item.description || "";
    return String(content)
      .replace(/<[^>]*>/g, " ")
      .replace(/\s+/g, " ")
      .trim();
  } catch (error) {
    console.error("格式化内容错误", error);
    return String(item.description || "");
  }
};

// 格式化时间显示
const formatTime = (timestamp) => {
  if (!timestamp) return "";

  try {
    // 处理CST格式的时间字符串
    if (typeof timestamp === "string" && timestamp.includes("CST")) {
      // 将CST时间字符串转换为Date对象
      const dateStr = timestamp.replace("CST", "GMT+0800");
      const date = new Date(dateStr);
      if (!isNaN(date.getTime())) {
        return timeAgo(date.getTime());
      }
    }

    // 原有的处理逻辑
    return timeAgo(timestamp);
  } catch (err) {
    console.error("格式化时间错误", err);
    return "";
  }
};
</script>

<style lang="scss">
@import "@/pages/notification/notification.scss";

.simple-item {
  padding: 10px 15px;
}

.notification-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.notification-time {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
</style>
